/*
 *  Copyright 2022 Collate.
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *  http://www.apache.org/licenses/LICENSE-2.0
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import (reference) '../variables.less';

@left-panel-border-color: rgb(229, 231, 235);
@box-shadow-color: rgba(0, 0, 0, 0.06);
@icon-color: #515151;

.ant-dropdown-menu {
  border-radius: @menu-radius;
}

.custom-menu.ant-menu-root.ant-menu-inline {
  background: @white;
  border: 0px;

  .ant-menu-item::after {
    left: 0;
    right: unset;
  }

  .ant-menu-item-group-title {
    font-size: 12px;
    padding: 12px 16px;
    color: @group-title-color;
  }

  .ant-menu-item-icon + span {
    margin-left: 8px;
  }

  .ant-menu-item {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin-top: 2px;
    padding: 0 16px !important;
  }

  .ant-menu-item:hover,
  .ant-menu-item-selected {
    .side-panel-icons {
      color: @primary-color;
    }
  }

  .ant-menu-item-selected {
    .ant-menu-title-content {
      font-weight: 600;

      .ant-badge {
        color: @primary-color;
      }
    }
  }

  .ant-menu-item-active {
    .ant-menu-title-content {
      .ant-badge {
        color: @primary-color;
      }
    }
  }

  .ant-menu-item:not(:last-child) {
    margin-bottom: 0px;
  }

  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    border-right: 1px solid @left-panel-border-color;
  }
}

.custom-menu-with-description {
  &.custom-menu.ant-menu-root.ant-menu-inline .ant-menu-item {
    height: 50px;
    margin-top: 4px;
  }

  &.custom-menu.ant-menu-root.ant-menu-inline
    .ant-menu-item-selected
    .ant-menu-title-content {
    font-weight: 400;
  }
}

.custom-menu-v1.ant-menu-root.ant-menu-inline {
  // need to add !important as in AntD menu padding is given inline
  padding: @padding-mlg !important;
  background-color: @grey-9;

  // for unselected menu items
  .ant-menu-item:not(.ant-menu-item-selected, .ant-menu-item-active) {
    svg {
      color: @grey-400;
    }
    .ant-menu-title-content {
      color: @grey-500;
    }
  }
  .ant-menu-item {
    border: 1px solid transparent;
    border-radius: @border-rad-xs;
    &::after {
      border: none;
    }
    // need to add !important as in AntD menu padding is given inline
    padding: @padding-xs @padding-sm !important;
  }

  .ant-menu-item-selected,
  .ant-menu-item-active {
    border-color: @primary-color;
    background-color: @white;
    font-weight: @font-semibold;

    border-radius: @border-rad-xs;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.04);

    transition: all 0.2s ease-in-out;
  }

  .ant-menu-item {
    .ant-menu-title-content {
      font-size: 16px;
    }
  }
}
